<template>
  <view class="ver-layout">
    <!--  标题返回栏  -->
    <view class="back-title-layout hor-layout-center" :style="{opacity: titleOpacity}">
      <view class="back-view" @click="navBack">
        <i class="iconfont back-icon">&#xe8de;</i>
      </view>
      <view class="title-text">学员信息</view>
    </view>
    <!-- 上面的布局  -->
    <view class="top-layout ver-layout" :style="getTopStyle">
      <view class="title-layout hor-layout-center">
        <view class="back-view" @click="navBack">
          <i class="iconfont back-icon">&#xe8de;</i>
        </view>
        <view class="title-text">学员信息</view>
      </view>
      <view class="top-layout-info hor-layout-center">
        <image class="student-icon" :src="studentInfo.avatar?studentInfo.avatar:ic_teacher_student_default1"/>
        <view class="ver-layout student-info">
          <view class="student-name">{{ studentInfo.realname ? studentInfo.realname : '姓名：' }}</view>
          <view class="student-number">学员编号：{{ studentObj.number }}</view>
          <view class="student-class">联系电话：{{ studentInfo.phone }}</view>
        </view>
        <view v-if="studentObj.class_title" class="major-name">{{ studentObj.class_title }}</view>
      </view>
    </view>
    <!--  下面的布局  -->
    <view class="content-layout">
      <view class="tab-layout hor-layout">
        <view v-for="(item,index) in tabList" :key="index" class="tab-item" :class="{'select':index===currentTab}"
              @click="tabChange(index)">
          {{ item.name }}
        </view>
      </view>
      <!--  信息布局   -->
      <view class="tab-content">
        <!--    基本信息    -->
        <view v-show="currentTab===0">
          <view v-for="(item,index) in studentInfos" :key="index" class="student-info-item hor-layout-side-center">
            <view>{{ item.label }}</view>
            <view>{{ item.value }}</view>
          </view>
        </view>
        <!--    在学课程    -->
        <view v-show="currentTab===1">
          <block v-if="courseList.length>0">
            <view v-for="(item,index) in courseList" :key="index" class="course-item hor-layout-center">
              <image class="course-icon" :src="item.course_image"></image>
              <view class="course-info">
                <view class="name">{{ item.course_title }}</view>
                <view class="price">总课费：{{ item.course_price }}</view>
                <view class="major">{{ item.course_major }}</view>
              </view>
              <!-- course_status: 1在读2结课  -->
              <view class="course-state">{{ item.course_status === 1 ? '在读' : '结课' }}</view>
            </view>
          </block>
          <view v-else class="list-no-data">暂无数据</view>
        </view>
        <!--    荣誉奖项    -->
        <view v-show="currentTab===2">
          <view v-if="honorList.length>0" class="flex-grid-layout">
            <view v-for="(item,index) in honorList" :key="index" class="honor-item">
              <image class="honor-image" :src="item.honor_image"></image>
              <view class="honor-name">{{ item.honor_name }}</view>
            </view>
          </view>
          <view v-else class="list-no-data">暂无数据</view>
        </view>
        <!--    消课记录    -->
        <view v-show="currentTab===3">
          <!--     消课记录概览     -->
          <view class="cost-lesson-layout ver-layout">
            <view class="remain-lesson ver-layout-center">
              <view class="hint">当前剩余总课时</view>
              <view class="num">{{ costLessonObj.course_total }}</view>
            </view>
            <view class="cost-lesson-content hor-layout">
              <view class="cost-lesson-item ver-layout-center">
                <view class="title">今日消课</view>
                <view class="num">{{ costLessonObj.remove_current_total }}</view>
              </view>
              <view class="cost-lesson-item ver-layout-center">
                <view class="title">累计消课</view>
                <view class="num">{{ costLessonObj.remove_total }}</view>
              </view>
            </view>
          </view>
          <!--    消渴记录列表      -->
          <view class="cost-lesson-list">
            <view class="cost-record-top hor-layout-side-center">
              <view class="title">消课记录</view>
              <view class="month">月</view>
            </view>
            <block v-if="costLessonList.length>0">
              <view v-for="(item,index) in costLessonList" :key="index" class="cost-record-item hor-layout-center">
                <view class="cost-record-info ver-layout">
                  <view class="cost-record-major">{{ item.course_title }}</view>
                  <view class="cost-record-time">{{ item.course_date }}</view>
                </view>
                <view class="cost-record-num">-1</view>
              </view>
            </block>
            <view v-else class="list-no-data">暂无数据</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
let ic_user_top_bg = require("@/static/home/ic_user_top_bg.png")
let ic_teacher_student_default1 = require("@/static/home/ic_student_default1.png")
import {StudentListApi} from "@/api/studyRecord.js"

let engine = new StudentListApi()
export default {
  name: "studentRecord",
  data() {
    return {
      ic_teacher_student_default1,
      titleOpacity: 0,
      tabBarStyle: {width: 'calc(100% /4 )'},
      studentObj: {},
      studentInfo: {},
      tabList: [{name: '基本信息'}, {name: '在学课程'}, {name: '荣誉奖项'}, {name: '消课记录'}],
      currentTab: 0,
      studentInfoMap: {
        realname: '学生姓名',
        phone: '联系电话',
        sexValue: '学生性别',
        birthday: '出生日期',
        age: '年龄',
        org_name: '所属校区',
        school: '上课分校',
      },
      courseList: [{},{},{},{},{},{},{}],
      honorList: [{}],
      costLessonObj: {},
      costLessonList: [{}]
    }
  },
  computed: {
    getTopStyle() {
      return {backgroundImage: `url(${ic_user_top_bg})`}
    },
    studentInfos() {
      let studentInfoMap = this.studentInfoMap, sKeyList = Object.keys(studentInfoMap), studentInfo = this.studentInfo
      sKeyList = sKeyList.map(key => {
        return {label: studentInfoMap[key], value: studentInfo[key] ? studentInfo[key] : '--'}
      })
      return sKeyList
    }
  },
  onLoad(options) {
    this.studentObj = options
    this.getStudentBasicInfo()
    this.getStudentCourse()
    this.getStudentAwards()
    this.getStudentLessonLog()
  },
  onPageScroll(e) {
    console.log("onPageScroll", e.scrollTop)
    this.titleOpacity = e.scrollTop * 0.005
  },
  methods: {
    navBack() {
      this.$u.route({type: 'back'})
    },
    tabChange(index) {
      this.currentTab = index
    },
    getStudentBasicInfo() {
      engine.getStudentBasicInfo(this.studentObj.id).then(res => {
        if (res.code === 200) {
          this.studentInfo = res.data
          this.studentInfo.sexValue = res.data.sex === 1 ? '男' : '女'
        }
      })
    },
    getStudentCourse() {
      engine.getStudentCourse(1, this.studentObj.id).then(res => {
        if (res.code === 200) {
          this.courseList = res.data
        }
      })
    },
    getStudentAwards() {
      engine.getStudentAwards(this.studentObj.id).then(res => {
        if (res.code === 200) {
          this.honorList = res.data
        }
      })
    },
    getStudentLessonLog() {
      engine.getStudentLessonLog(1, this.studentObj.id).then(res => {
        if (res.code === 200) {
          this.costLessonObj = res.data
          this.costLessonList = res.list
        }
      })
    }
  }
}
</script>

<style>
page {
  background: #EFEFEF;
}

.back-title-layout {
  z-index: 1000;
  position: fixed;
  width: 100%;
  padding-top: var(--status-bar-height);
  height: calc(var(--status-bar-height) + 44px);
  background: #666D7A;
}

.title-layout {
  width: 100%;
  height: 44px;
}

.back-view {
  padding-left: 9px;
  padding-right: 9px;
}

.back-icon {
  color: white;
  font-size: 22px;
}

.title-text {
  width: 100%;
  margin-right: 44px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: white;
}

.top-layout {
  position: absolute;
  width: 100%;
  padding-top: var(--status-bar-height);
  height: calc(var(--status-bar-height) + 140px);
  background-repeat: repeat;
  background-size: 100% 100%;
}

.top-layout-info {
  padding: 0px 12px;
  padding-top: 10px;
}

.student-icon {
  width: 48px;
  height: 48px;
  background: #F8D0D0;
  border-radius: 50%;
}

.student-info {
  flex: 1;
  margin-left: 12px;
}

.student-name {
  line-height: 14px;
  font-size: 14px;
  color: #FFFFFF;
}

.student-number {
  margin-top: 11px;
  line-height: 12px;
  font-size: 12px;
  color: #FFFFFF;
}

.student-class {
  margin-top: 9px;
  line-height: 12px;
  font-size: 12px;
  color: #FFFFFF;
}

.content-layout {
  margin-top: calc(var(--status-bar-height) + 140px);
}

.tab-layout {
  width: 100%;
  height: 40px;
  background: white;
  border-bottom: 1px solid #E4E4E4;
}

.tab-item {
  flex: 1;
  height: 40px;
  line-height: 40px;
  text-align: center;
  /* 文本 */
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.tab-item.select {
  color: #42B4AB;
  border-bottom: 2px solid #42B4AB;
}

.student-info-item {
  padding: 0px 12px;
  width: 100%;
  height: 41px;
  background: white;
  border-bottom: 1px solid #E4E4E4;
}

.student-info-item > * {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.course-item {
  padding: 18px 12px;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
}

.course-icon {
  width: 110px;
  height: 63px;
  border-radius: 8px;
  background: #ffe4c7;
}

.course-info {
  flex: 1;
  margin-left: 12px;
}

.course-info > .name {
  font-size: 15px;
  line-height: 15px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #333333;
}

.course-info > .price {
  margin-top: 10px;
  font-size: 10px;
  line-height: 10px;
  font-family: Source Han Sans CN;
  color: #FF1D1D;
}

.course-info > .major {
  margin-top: 12px;
  padding: 0px 10px;
  height: 16px;
  width: fit-content;
  line-height: 16px;
  background: #FDC62D;
  border-radius: 8px;
  /**/
  font-size: 10px;
  font-family: Source Han Sans CN;
  color: #FFFFFF;
}

.course-state {
  padding: 0px 17px;
  height: 24px;
  width: fit-content;
  border: 1px solid #42B4AB;
  border-radius: 12px;
  /**/
  font-size: 14px;
  font-family: Source Han Sans CN;
  color: #42B4AB;
}

.honor-item {
  margin-top: 18px;
  margin-left: 12px;
  width: calc(50% - 18px);
}

.honor-image {
  width: 100%;
  height: 112px;
  border-radius: 6px;
  background: #f5dcc3;
}

.honor-name {
  margin-top: 12px;
  /**/
  font-size: 12px;
  color: #333333;
}

.cost-lesson-layout {
  width: 100%;
  background: white;
}

.remain-lesson {
  margin: auto;
  margin-top: 18px;
  width: 313px;
  height: 76px;
  background: #42B4AB;
  border-radius: 5px;
}

.remain-lesson > .hint {
  margin-top: 14px;
  font-size: 14px;
  line-height: 14px;
  color: #FFFFFF;
}

.remain-lesson > .num {
  margin-top: 14px;
  font-size: 23px;
  line-height: 23px;
  font-weight: bold;
  color: #FFFFFF;
}

.cost-lesson-content {
  padding-top: 29px;
  padding-bottom: 19px;
}

.cost-lesson-item {
  flex: 1;
}

.cost-lesson-item > .title {
  font-size: 16px;
  font-weight: bold;
  color: #42B4AB;
}

.cost-lesson-item > .num {
  margin-top: 17px;
  font-size: 12px;
  color: #999999;
}

.cost-lesson-list {
  margin-top: 14px;
  width: 100%;
  min-height: 200px;
  background: white;
}

.cost-record-top {
  padding: 0px 12px;
  padding-top: 14px;
  padding-bottom: 8px;
}

.cost-record-top > .title {
  font-size: 16px;
  font-weight: bold;
  color: #666666;
}

.cost-record-top > .month {
  font-size: 14px;
  color: #A1A1A1;
}

.cost-record-item {
  padding: 18px 12px;
  width: 100%;
  border-bottom: 1px solid #E4E4E4;
}

.cost-record-info {
  flex: 1;
}

.cost-record-major {
  font-size: 14px;
  line-height: 14px;
  color: #333333;
}

.cost-record-time {
  margin-top: 7px;
  font-size: 14px;
  line-height: 14px;
  color: #A1A1A1;
}

.cost-record-num {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  color: #42B4AB;
}

.list-no-data {
  height: 150px;
  line-height: 150px;
}
</style>
